<template>
  <a-card :bordered="false" class="withdrawal">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="待审核"></a-tab-pane>
      <a-tab-pane key="2" tab="待转账"></a-tab-pane>
      <a-tab-pane key="3" tab="已驳回"></a-tab-pane>
      <a-tab-pane key="4" tab="已提现"></a-tab-pane>
    </a-tabs>
    <section>
      <div class="theknightSearch table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :lg="2" :md="2">
              <a-button type="primary" icon="download" @click="handleExportXls('系统审核')">导出</a-button>
            </a-col>
            <a-col :lg="6" :md="8" :sm="12" :xs="24">
              <a-form-item label="记录时间">
                <a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" v-model="queryParam.createTime"
                  placeholder="请选择记录时间" />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="8" :sm="12" :xs="24">
              <a-form-model-item label="分站：" prop="siteId">
                <a-select placeholder="请选择分站" v-model="queryParam.siteId" show-search :showArrow="false" allowClear
                  :filter-option="filterSelectOption" @change="changeSiteId">
                  <a-select-option v-for="item in siteList" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :lg="5" :md="5">
              <a-button type="primary" @click="callback(key)">搜索</a-button>
              <a-button class="lfbtn" type="primary"
                v-if="queryParam.withdrawCashStatus==2||queryParam.withdrawCashStatus==3" @click="batchReview">批量审核
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <section class="table">
        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :pagination="ipagination"
          @change="changePage" :dataSource="List" :loading="loading"
          :rowSelection="{selectedRowKeys:selectedRowKeysArrey,onChange:onSelectChange1,type:'radio'}" @expand="expand">
          <template slot="expandedRowRender" slot-scope="records">
            <a-table rowKey="id" :columns="innerColumns" :dataSource="records.mkBillLineVo" :pagination="false">

            </a-table>
          </template>
        </a-table>
      </section>
    </section>
    <!-- <a-drawer title="订单详情" placement="right" :closable="false" :visible="visible" @close="checkCancel" width="400">
      <a-form-model :labelCol="{span: 6}" :wrapperCol="{span: 10, offset: 1}" class="Detaile">
        <a-form-model-item label="提现id">
          <label for="">{{check.id}}</label>
        </a-form-model-item>
        <a-form-model-item label="提现账号">
          <label for="">{{check.rakeAlipay}}</label>
        </a-form-model-item>
        <a-form-model-item label="提现账号姓名">
          <label for="">{{check.rakeAliname}}</label>
        </a-form-model-item>
        <a-form-model-item label="实付金额">
          <label for="">{{check.payAmount}}</label>
        </a-form-model-item>
        <a-form-model-item label="佣金比例">
          <label for="">{{check.rakeRate}}</label>
        </a-form-model-item>
        <a-form-model-item label="结算后收益">
          <label for="">{{check.rakeAmount}}</label>
        </a-form-model-item>
        <a-form-model-item label="提现时间">
          <label for="">{{check.withdrawTime}}</label>
        </a-form-model-item>
        <a-form-model-item label="提现状态">
          <label for="" v-if="check.withdrawCashStatus==2">提现状态 :待审核</label>
          <label for="" v-if="check.withdrawCashStatus==3">提现状态 :待转账</label>
          <label for="" v-if="check.withdrawCashStatus==4">提现状态 :已驳回</label>
          <label for="" v-if="check.withdrawCashStatus==5">提现状态 :已提现</label>
        </a-form-model-item>
      </a-form-model>
      <div class="auditBtn">
        <a-button type="primary" v-if="check.withdrawCashStatus==2" @click="throughReview">审核通过</a-button>
        <a-button type="primary" v-if="check.withdrawCashStatus==2||check.withdrawCashStatus==3" @click="auditFailure">
          审核驳回</a-button>
        <a-button type="primary" v-if="check.withdrawCashStatus==3" @click="transferAccounts">转账</a-button>
      </div>
    </a-drawer> -->
    <a-modal v-model="showBatchReview" title="批量审核" :footer="null" @cancel="cancel">
      <label>已选择：{{chooseOrder.siteName}} {{chooseOrder.shopName}}</label><br>
      <label>金额：{{chooseOrder.changeValue}}</label>
      <div class="auditBtn">
        <a-button type="primary" v-if="queryParam.withdrawCashStatus==2" @click="throughReview">审核通过</a-button>
        <a-button type="primary" v-if="queryParam.withdrawCashStatus==2||queryParam.withdrawCashStatus==3"
          @click="auditFailure">
          审核驳回</a-button>
        <a-button type="primary" v-if="queryParam.withdrawCashStatus==3" @click="transferAccounts">转账</a-button>
      </div>
    </a-modal>
  </a-card>

</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {
  postAction,
  getAction,
  putAction
} from '@/api/manage'

export default {
  mixins: [JeecgListMixin,],
  data() {
    return {
      showBatchReview: false,//批量审核弹框
      visible: false,
      loading: false,
      showDetail: false,
      queryParam: {
        type: 2
      },
      List: [],
      selectedRowKeysArrey: [], //选中的
      chooseOrder: '', // 选中的数据
      siteList: [],//分站列表

      columns: [
        {
          title: '分站',
          align: 'center',
          dataIndex: 'siteName'
        },

        {
          title: '提现单号',
          align: 'center',
          dataIndex: 'changeNo'
        },
        {
          title: '提现收益',
          align: 'center',
          dataIndex: 'changeValue'
        },
        {
          title: '审核状态',
          align: 'center',
          dataIndex: 'withdrawCashStatus',
          customRender: function (t, r, index) {
            let color
            switch (t) {
              case 1:
                color = 'orange'
                break
              case 2:
                color = 'purple'
                break
              case 3:
                color = 'blue'
                break
              case 4:
                color = 'pink'
                break
              case 5:
                color = 'green'
                break
              case 6:
                color = 'red'
                break
            }
            return color ? <a-tag
              color={color}>{r.withdrawCashStatus_dictText}</a-tag> : r.withdrawCashStatus_dictText
          }
        },
        {
          title: '结算时间',
          align: 'center',
          dataIndex: 'withdrawTime'
        },
        {
          title: '申请提现时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '结算时支付宝姓名',
          align: 'center',
          dataIndex: 'rakeAliname'
        },
        {
          title: '提现审核时间',
          align: 'center',
          dataIndex: 'withdrawApplyCheckTime'
        }
      ],
      innerColumns: [
        {
          title: '订单号',
          align: 'center',
          dataIndex: 'orderNo'
        },
        {
          title: '实付金额',
          align: 'center',
          dataIndex: 'payAmount'
        },
        {
          title: '佣金比例',
          align: 'center',
          dataIndex: 'rakeRate',
          customRender: (t) => {
            return t * 100 + '%'
          }
        },
        {
          title: '本单收益',
          align: 'center',
          dataIndex: 'rakeAmount'
        },
        {
          title: '结算时间',
          align: 'center',
          dataIndex: 'createTime'
        },

      ],
      //标记页数；页码
      ipagination: {
        current: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        total: 0
      },
      key: '',//当前tabs
      url: {
        list: '/finance/bill/page/mkBillChange',
        sysCheck: '/finance/bill/withdrawCash/income/application/check',
        allSite: '/merchant/certification/allSite',
        transfer: '/finance/bill/withdrawCash/income/application/transferAll',
        exportXlsUrl: '/finance/bill/withdrawCash/sysCheck/exportXls',

      },
      check: {},
      through: [],
      auditOk: {}, //审核通过
      auditNo: {}, //审核驳回
    }
  },
  created() {
    this.callback(1)
    this.getallsite()
  },
  methods: {
    getList() {
      this.loading = true
      getAction(this.url.list, this.queryParam).then(res => {
        console.log(res, "财务记录");
        if (res.success) {
          this.loading = false
        }
        this.List = res.result.records
        this.ipagination.total = res.result.total;  // 页数
      })
    },

    // rejected(e) {
    //   this.check = e
    //   this.visible = true
    //   console.log(e)
    // },
    // checkCancel() {
    //   this.check = ""
    //   this.visible = false
    //   this.getList()
    // },
    // 审核通过
    throughReview() {
      let that = this
      that.auditOk.id = that.chooseOrder.id
      that.auditOk.withdrawCashStatus = 3
      console.log(that.auditOk)
      // return
      postAction(this.url.sysCheck, that.auditOk).then(res => {
        console.log({ res })
        if (res.success) {
          that.$message.success('成功！')
          that.callback()
        } else {
          that.$message.warning('失败！')
          that.callback()
        }
      })
    },
    // 审核驳回
    auditFailure() {
      let that = this
      that.auditOk.id = that.chooseOrder.id
      that.auditOk.withdrawCashStatus = 4
      console.log(that.auditOk)
      postAction(this.url.sysCheck, that.auditOk).then(res => {
        console.log(res)
        if (res.success) {
          that.$message.success('成功！')
          that.callback()
        } else {
          that.$message.warning('失败！')
          that.callback()
        }
      })
    },
    // 打开批量审核
    batchReview() {
      if (this.chooseOrder) {
        this.showBatchReview = true
      }
    },
    // 关闭
    cancel() {
      this.callback()
    },
    handleOk() {
      console.log("1")
    },
    handleNo() {
      console.log("2")
    },
    transferAccounts() {
      //转账，支付宝转账
      const self = this
      console.log('账单信息= ', this.chooseOrder)
      getAction(self.url.transfer, { id: self.chooseOrder.id }).then(res => {
        console.log(res)
        if (res.success) {
          self.$message.info('提现成功')
          this.checkCancel()
          // TODO 关闭页面
        }
      })
    },
    callback(key) {
      this.key = key

      if (key == 1) {
        this.queryParam.withdrawCashStatus = 2
      }
      if (key == 2) {
        this.queryParam.withdrawCashStatus = 3
      }
      if (key == 3) {
        this.queryParam.withdrawCashStatus = 4
      }
      if (key == 4) {
        this.queryParam.withdrawCashStatus = 5
      }
      this.getList()
      console.log("当前选中的tabs", this.queryParam, "当前查询参数");
      this.chooseOrder = ''
      this.selectedRowKeysArrey = []
      this.showBatchReview = false
    },
    // 获取所有分站
    getallsite() {
      const self = this
      self.siteList = []
      getAction(self.url.allSite, {}).then(res => {
        // console.log(res)
        if (res.success) {
          self.siteList = res.result
        } else {
          self.$message.warning(res.message)
        }
      })
    },
    // 输入筛选 分站
    filterSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    changeSiteId() {
      this.queryParam.shopId = undefined
      if (this.queryParam.siteId) {
        this.queryParam.shopId = undefined
      }
    },
    // 选中一行
    onSelectChange1(a, b) {
      this.selectedRowKeysArrey = a;
      this.chooseOrder = b[0];
      console.log(this.selectedRowKeysArrey, "选中的数据1", b);
    },
    // 代理列表改变分页
    changePage(pagination) {
      this.ipagination.current = pagination.current
      console.log(pagination);
      this.queryParam.pageNo = pagination.current;
      this.queryParam.pageSize = pagination.pageSize;
      this.getList();
    },
    expand(e) {
      console.log(e, "1")
    },
  }
}
</script>
<style lang="less" scoped>
.withdrawal {
  .time {
    margin-top: 30px;
  }

  .theknightSearch {
    margin-top: -15px;
    padding: 15px 10px;
    .ant-form-item {
      width: 100%;
    }
  }
}
.auditBtn {
  text-align: right;
  button {
    margin-left: 20px;
  }
}
.btn {
  button {
    margin-right: 10px;
  }
}
.lfbtn {
  margin-left: 20px;
}
</style>